<template>
  <div class="blueray-device">
    <NavItem :p-style="{
      background: 'lightgreen',
      width: '250px',
      fontSize: '16px',
      textAlign: 'left'
    }">
      <template #title>蓝光设备</template>
    </NavItem>

    <div class="chart-container">
      <div class="left-class">
        <div ref="rayStorageRef" class="chart-container4"></div>
        <div class="rayExample-text">
          <div v-for="item in items" :key="item.label">{{ item.label }}:{{ item.value }}{{ item.unit }}</div>
        </div>
      </div>
      <div class="right-class">
        <div class="magetic-storage">
          <div ref="mageticStorageRef" class="chart-container5"></div>
           <div class="magExample-text">
          <div v-for="item in items" :key="item.label">{{ item.label }}:{{ item.value }}{{ item.unit }}</div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavItem from '@/components/NavItem.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const items = ref([
  { label: '存储总容量', value: 100, unit: 'TB' },
  { label: '已用容量', value: 69.82, unit: 'TB' },
  { label: '剩余容量', value: 30.18, unit: 'TB' }
])

const rayStorageRef = ref(null)
const mageticStorageRef = ref(null)

let rayStorageChart = null
let mageticStorageChart = null

const initChart = (chartRef, option) => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)
    return chart
  }
  return null
}

const handleResize = () => {
  rayStorageChart?.resize()
  mageticStorageChart?.resize()
}

onMounted(() => {
  // 光存储图表配置
  const storageOption = {
    tooltip: { trigger: 'item' },
    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '光存储\n69.82%',
        textAlign: 'center',
        fontSize: 14,
        fontWeight: 'bold',
      }
    }],
    series: [{
      name: '存储分布',
      type: 'pie',
      radius: ['40%', '70%'],
      label: {
        show: true,
        formatter: '{b}: {c}',
        color: '#333',
        fontSize: 12
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 15,
        lineStyle: { width: 1, color: '#999' }
      },
      emphasis: {
        label: { show: true }
      },
      data: [
        { value: 35, name: '数字法庭' },
        { value: 8, name: '卷宗' },
        { value: 5, name: '档案' },
        { value: 8, name: '其他' },
        { value: 44, name: '剩余' }
      ]
    }]
  }

  // 磁存储图表配置
  const operateOption = {
    tooltip: { trigger: 'item' },
    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '利用率\n84%',
        textAlign: 'center',
        fontSize: 10,
        fontWeight: 'bold',
      }
    }],
    series: [{
      name: '处理器',
      type: 'pie',
      radius: ['55%', '70%'],
      label: { show: false },
      emphasis: { label: { show: true } },
      data: [
        { value: 50, name: '核心业务' },
        { value: 25, name: '数据分析' },
        { value: 15, name: '后台服务' },
        { value: 10, name: '其他' }
      ]
    }]
  }

  // 初始化图表
  rayStorageChart = initChart(rayStorageRef, storageOption)
  mageticStorageChart = initChart(mageticStorageRef, operateOption)

  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  rayStorageChart?.dispose()
  mageticStorageChart?.dispose()
})
</script>

<style scoped lang="scss">
.blueray-device {
  display: flex;
  flex-direction: column;
  height: 400px; /* 增加高度 */
  width: 100%;
}

.chart-container {
  display: flex;
  height: calc(100% - 50px); /* 减去标题高度 */
  width: 100%;

  .left-class, .right-class {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
  }

   .chart-container4 {
    width: 100%;
    height: 100%;
    min-height: 200px;
  }
.chart-container5{
  width: 100%;
    height: 100%;
    min-height: 130px;
}
  .rayExample-text {
    background-color: aquamarine;
    opacity: .7;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
  .magExample-text{
     background-color: aquamarine;
    opacity: .7;
    color: #fff;
    padding: 10px;
  }
}
</style>
